<template>
  <el-card class="box-card">
    <span class="wenz"> <b>说明 : 目前支持学科和关键字条件筛选呦 </b> </span>
    <el-button size="small" class="button" icon="el-icon-edit" type="success" @click="addQuestion"
      >新增试题</el-button
    >
    <!-- 搜索 -->
    <el-form label-width="70px" size="mini" :inline="true" class="demo-form-inline">
      <el-form-item label="学科" prop="">
        <el-select placeholder="请选择" v-model="search.subjectID" @change="change">
          <el-option
            v-for="item in alllist"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级目录" prop="">
        <el-select placeholder="请选择" v-model="search.catalogID">
          <el-option
            v-for="item in dirname"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="">
        <el-select placeholder="请选择" v-model="search.tags">
          <el-option
            v-for="item in label"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="">
        <el-input v-model="search.keyword" placeholder="根据题干搜索"></el-input>
      </el-form-item>
      <el-form-item label="试题类型" prop="">
        <el-select placeholder="请选择" v-model="search.questionType">
          <el-option
            v-for="item in questionType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度" prop="">
        <el-select placeholder="请选择" v-model="search.difficulty">
          <el-option
            v-for="item in difficulty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="">
        <el-select placeholder="请选择" v-model="list.direction">
          <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人" prop="">
        <el-select placeholder="请选择" v-model="search.creatorID">
          <el-option
            v-for="item in username"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注" prop="" style="margin-left: 1px">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="企业简称" prop="" style="margin-left: 1px">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="" style="margin-left: 1px">
        <el-select placeholder="请选择" style="width: 100px" v-model="search.province">
          <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select
          placeholder="请选择"
          style="width: 100px; margin-left: 10px"
          v-model="search.city"
        >
          <el-option v-for="item in citys" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btn">
        <el-button size="mini" @click="qingchu">清除</el-button>
        <el-button type="primary" size="mini" @click="sousuo">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 提示消息 -->
    <el-alert :title="` 数据一共 ${this.total} 条 `" type="info" :closable="false" show-icon>
    </el-alert>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="100"> </el-table-column>
      <el-table-column prop="subject" label="学科" width="100"> </el-table-column>
      <el-table-column prop="catalog" label="目录" width="100"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="100">
        <template #default="{ row }">
          {{ topic(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column label="题干" width="200">
        <template #default="{ row }">
          {{ formatEmployee(row.question) }}
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template #default="{ row }">
          {{ formatTime(row.timeOfEntry) }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度">
        <template #default="{ row }">
          {{ Abyss(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="100"> </el-table-column>
      <!-- 按钮 -->
      <el-table-column prop="" label="操作" width="180">
        <template #default="{ row }">
          <!-- 预览 -->
          <el-tooltip content="预览" placement="bottom" effect="light">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-view"
              circle
              plain
              @click="preview(row.id)"
            ></el-button>
          </el-tooltip>
          <!-- 编辑 -->
          <el-tooltip content="编辑" placement="bottom" effect="light">
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              circle
              plain
              @click="bianji(row.id)"
            ></el-button>
          </el-tooltip>
          <!-- 删除 -->
          <el-tooltip content="删除" placement="bottom" effect="light">
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="remove(row.id)"
            ></el-button>
          </el-tooltip>
          <!-- 加入到精选题 -->
          <el-tooltip content="加入到精选题" placement="bottom" effect="light">
            <el-button
              size="small"
              type="warning"
              icon="el-icon-check"
              circle
              plain
              @click="select(row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[2, 5, 10, 20, 50]"
      :page-size="query.pagesize"
      layout=" prev, pager, next, sizes,  jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 预览题目 -->
    <questions-preview
      :showDialog="showDialog"
      :pvw="pvw"
      @close="showDialog = false"
    ></questions-preview>
  </el-card>
</template>

<script>
import dayjs from 'dayjs'
// 题目预览
// main.js 中，注册为全局组件
import QuestionsPreview from '@/module-hmmm/pages/questions-preview'
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
// 学科列表
import { list as discipline } from '@/api/hmmm/subjects.js'
// 目录列表
import { simple as directory } from '@/api/hmmm/directorys.js'
// 第二行 下拉框数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 录入人
import { simple as keyword } from '@/api/base/users.js'
// 标签列表
import { simple as tags } from '@/api/hmmm/tags.js'
// 导入城市
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  name: 'questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 存放列表数据
      list: [],
      // 存放所有的学科列表数据
      alllist: [],
      // 存放总数量
      total: 0,
      // 存放分页的数据
      query: {
        page: 1, // 当前页码数
        pagesize: 5 // 当前页面需要的数据条数
      },
      // 存放所有分页的数据 可以获取到
      params: {
        page: 1, // 当前页码数
        pagesize: 100// 当前页面需要的数据条数
      },
      // 搜索下拉框的数据
      search: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: '' // 省份
      },
      // 存放 准备 预览的数据
      id: '',
      // 存放回显数据
      pvw: {},
      // 预览对话框
      // dialogVisible: false
      showDialog: false,
      // 学科列表 存放所有的 二级目录
      directory: {
        id: '',
        page: 1, // 当前页码数
        pagesize: 100// 当前页面需要的数据条数
      },
      // 难度下拉框
      difficulty: difficulty,
      // 试题类型下拉框
      questionType: questionType,
      // 方向 下拉框
      direction: direction,
      // 加入精选
      Switch: {
        id: null,
        choiceState: 1
      },
      // 录入人
      username: [],
      // 二级目录
      dirname: [],
      // 标签
      label: [],
      // 城市
      provinces: [],
      // 区
      citys: []
    }
  },

  // 自执行生命周期函数
  mounted () {
    this.Getlist()
    this.keyword()
    this.provinces = provinces()
  },
  // 侦听器 侦听市 的变化 调用 区的方法 把市当作形参传给区的
  watch: {
    'search.province' (val) {
      this.citys = citys(val)
    }

  },
  methods: {
    // 列表数据
    async Getlist () {
      const { data, status } = await list(this.query)
      // console.log(data, status)
      if (status === 200) {
        // 列表数据
        this.list = data.items
        // 总数量
        this.total = data.counts
      }
      // 存放所有的学科列表数据
      const res = await discipline(this.params)
      // console.log(res)
      if (res.status === 200) {
        this.alllist = res.data.items
      }
    },
    // 题干
    formatEmployee (value) {
      // console.log(value)
      return value.replace(/<.*?>/ig, '')
    },
    // 处理时间
    formatTime (value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // 题型
    topic (value) {
      // 把value按照需求格式化
      // 1 -> 正式  2 -> 非正式 4->其他
      // 前端枚举优化: 先把所有的对应关系通过对象定义出来 + 对象的取值 -> 策略模式 优化多分支语句的
      const MAP = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return MAP[value]
    },
    // 难度
    Abyss (value) {
      // 把value按照需求格式化
      // 1 -> 正式  2 -> 非正式 4->其他
      // 前端枚举优化: 先把所有的对应关系通过对象定义出来 + 对象的取值 -> 策略模式 优化多分支语句的
      const MAP = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return MAP[value]
    },
    // 改变了每页数据条数的时候，触发这个事件
    handleSizeChange (newSize) {
      // console.log(newSize) // 得到最新的，每页 显示 newSize 条数据
      this.query.pagesize = newSize
      this.query.page = 1
      this.Getlist()
    },
    // 页码改变的时候，触发的事件
    handleCurrentChange (newPage) {
      // console.log(newPage)
      this.query.page = newPage
      this.Getlist()
    },
    // 点击删除按钮
    async remove (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning',
        callback: async r => {
          if (r === 'confirm') {
            // ❗❗❗ 看产品经理的需求 这是删除最后一页数据,跳转到上一页显示数据
            // 判断当前删除的是否为最后一页的最后一个记录
            this.list.forEach((item, index) => {
              // 如果当前id是要删除的id
              if (item.id === id) {
                // 判断规则:（当前页码-1）*页容量+要被删除项的索引+1===总条数 && 判断被删项索引是否为0 && 当前不是第一页
                if (
                  (this.query.page - 1) * this.query.pagesize + index + 1 === this.total &&
                  index === 0 &&
                  this.query.page > 1
                ) {
                  // 如果是就将页码回到上一页
                  this.query.page--
                }
              }
            })

            const res = await remove({ id })
            // console.log(res)
            if (res.status === 200) {
              this.Getlist() // 重新渲染页面
              this.$message.success('删除成功') // 提示消息
            }
          }
        }
      })
    },
    //  点击预览
    async preview (id) {
      this.showDialog = true
      const res = await detail({ id })
      // console.log(res)
      if (res.status === 200) {
        this.pvw = res.data
      }
    },
    // 加入精选按钮
    select (id) {
      this.Switch.id = id
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const res = await choiceAdd(this.Switch)
        // console.log(res)
        if (res.status === 200) {
          this.$message.success('加入成功')
          this.Getlist()
        }
      }).catch(() => {

      })
    },
    // 录入人
    async keyword () {
      const res = await keyword()
      // console.log(res)
      this.username = res.data
    },
    // 当学科发生发生改变后
    change () {
      // 调用下面的方法获取二级目录的数据
      this.getdiscipline()
      // 调用下面的方法获取标签的数据
      this.tagsaa()
    },
    // 获得当前学科的二级目录的数据
    async getdiscipline () {
      const res = await directory({ subjectID: this.search.subjectID })
      // console.log(res)
      this.dirname = res.data
    },
    // 获取当前学科的标签的数据
    async tagsaa () {
      const res = await tags({ subjectID: this.search.subjectID })
      // console.log(res)
      this.label = res.data
    },
    // 搜索按钮
    async sousuo () {
      const res = await list({
        ...this.search,
        ...this.params
      })
      // console.log(res)
      this.list = res.data.items
    },
    // 点击清除
    qingchu () {
      this.search = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: '' // 省份
      }
      this.Getlist({
        ...this.query
      })
    },
    // 点击编辑按钮
    bianji (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          // 携带 当前哈希地址 的参数 传递给 点击登录 的跳转位置
          id
          // to.path -> 只包含路径
          // fullPatch 既有路径也有参数
        }
      })
    },
    // 点击新增按钮  进行跳转
    addQuestion () {
      // 进行跳转
      this.$router.push('/questions/new')
    }

  }
}
</script>

<style scoped lang="scss">
.wenz {
  font-size: 12px;
  font-size: 400;
  color: red;
}
.el-form {
  margin-top: 15px;
  height: 145px;
  .el-form-item {
    height: 30px;
  }
}
.el-form::v-deep .el-input__inner {
  font-size: 13px;
  margin-left: 5px;
}
.btn {
  margin-left: 165px;
  text-align: right;
}
.button {
  margin-left: 1060px;
}
.el-input {
  width: 210px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.box-card {
  margin-bottom: 20px;
  margin-left: 5px;
  width: 100%;
}
.demo-form-inline {
  width: 1360px;
}
.dialog-footer {
  margin-left: 550px;
}
</style>
